<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="输入任务名称，回车确认"
        autofocus
        v-model.trim="state.totalInput"
        @keyup.enter="AddInput"
      />
    </header>

    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="checkAll"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          :class="{ completed: item.flag }"
          v-for="(item, index) in listAll"
          :key="item.id"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.flag" checked />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="btnDelet(index)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>

    <footer class="footer">
      <span class="todo-count"
        ><strong>{{ checkleng }}</strong> 条未读</span
      >
      <ul class="filters">
        <li>
          <a
            :class="{ selected: state.type == 1 }"
            href="#/"
            @click="state.type = 1"
            >全部</a
          >
        </li>
        <li>
          <a
            :class="{ selected: state.type == 2 }"
            href="#/"
            @click="state.type = 2"
            >未读</a
          >
        </li>
        <li>
          <a
            :class="{ selected: state.type == 3 }"
            href="#/"
            @click="state.type = 3"
            >已读</a
          >
        </li>
      </ul>
      <button class="clear-completed" @click="btnAll">清空已完成的</button>
    </footer>
  </section>
</template>

<script>
import { computed, reactive, toRefs, watch } from "vue";
export default {
  setup() {
    const state = reactive({
      list: JSON.parse(localStorage.getItem("totalList")) || [],
      totalInput: "",
      type: 1,
    });

    // 删除按钮
    const btnDelet = (index) => {
      state.list.splice(index, 1);
    };

    // 添加数据
    const AddInput = () => {
      if (!state.totalInput) return alert("请输入内容");
      state.list.push({
        id: state.list.length + 1,
        name: state.totalInput,
        flag: false,
      });
      // 回车清空数据
      state.totalInput = "";
    };

    // 左下角的计算属性
    const checkleng = computed(() => {
      return state.list.filter((item) => item.flag == false).length;
    });

    //全选和反选的功能
    const checkAll = computed({
      get: () => {
        return state.list.length > 0
          ? state.list.every((item) => item.flag == true)
          : false;
      },
      set: (val) => {
        console.log(val);
        state.list.forEach((item) => (item.flag = val));
      },
    });

    //侦听
    watch(
      () => state.list,
      () => {
        localStorage.setItem("totalList", JSON.stringify(state.list));
      },
      //深度侦听
      { deep: true, immediate: true }
    );

    // 点击谁切换数据
    const listAll = computed(() => {
      if (state.type == 2) {
        return state.list.filter((item) => item.flag);
      } else if (state.type == 3) {
        return state.list.filter((item) => !item.flag);
      } else {
        return state.list;
      }
    });

    // 清空已完成的
    const btnAll = () => {
      state.list = state.list.filter((item) => item.flag == false);
    };

    return {
      ...toRefs(state),
      state,
      btnDelet,
      AddInput,
      checkleng,
      checkAll,
      btnAll,
      listAll,
    };
  },
};
</script>

<style>
</style>